import { Component, Vue } from 'vue-property-decorator'
import { Action } from 'vuex-class'
import styles from './PayResult.less'

const typeList: any = {
  fail: { title: '支付失败', icon: 'el-icon-circle-close', color: '#F5212D' },
  success: {
    title: '支付成功',
    icon: 'el-icon-circle-check',
    color: '#29CC44',
  },
  submit: {
    title: '已提交支付请求',
    icon: 'el-icon-circle-check',
    color: '#29CC44',
  },
  timeout: {
    title: '支付订单已超时',
    icon: 'el-icon-warning-outline',
    color: '#F5A623',
  },
  close: {
    title: '支付订单已关闭',
    icon: 'el-icon-warning-outline',
    color: '#F5A623',
  },
} // 订单结果

@Component({})
export default class PayResult extends Vue {
  private type: any = null
  private orderId: any = null
  private sealApplyId: any = null
  private needAudit: boolean = false

  @Action('newApply/sealDetail') private sealDetail!: any

  protected render() {
    return (
      <div>
        {this.type && (
          <div class={styles.content}>
            <i
              class={typeList[this.type]['icon']}
              style={{ color: typeList[this.type]['color'], fontSize: '60px' }}
            />
            <p class={styles.title}>{typeList[this.type]['title']}</p>
            <p class={styles.tips}>
              您可以在订单列表中查看当前订单状态
              {this.needAudit && (
                <span>，请耐心等待统一付费方审核订单支付情况</span>
              )}
            </p>
            <p class={styles.opt}>
              {(this.type === 'success' || this.type === 'submit') && (
                <el-button
                  type="default"
                  onClick={this.toDetail}
                  style="width: 110px !important;"
                >
                  查看申请详情
                </el-button>
              )}
              {this.type !== 'success' && this.type !== 'submit' && (
                <el-button type="default" onClick={this.toOrderList}>
                  返回列表
                </el-button>
              )}
              {(this.type === 'fail' || this.type === 'timeout') && (
                <el-button type="primary" onClick={this.rePay}>
                  重新支付
                </el-button>
              )}
            </p>
          </div>
        )}
      </div>
    )
  }

  private mounted() {
    this.type = this.$route.params.type || ''
    this.orderId = this.$route.query.orderId || ''
    this.sealApplyId = this.$route.query.sealApplyId
    this.needAudit = !!this.$route.query.needAudit
  }

  private toOrderList() {
    this.$router.push({ name: 'myOrderList', params: { type: 'all' } })
  }

  private rePay() {
    // if(this.type==='timeout'){
    // this.$router.push({ name: 'paymentOrder',params:{type: 'newApply'}, query: { id: this.sealApplyId } })
    // }else{
    //   this.$router.push({ name: 'orderConfirm', query: { orderId: this.orderId, sealApplyId: this.sealApplyId} })
    // }
    // console.log(this.type)
    this.sealDetail(this.sealApplyId).then((res: any) => {
      if (!!res.payOrderId) {
        this.$router.push({
          name: 'orderConfirm',
          query: { orderId: res.payOrderId, sealApplyId: this.sealApplyId },
        })
      } else {
        this.$router.push({
          name: 'applyPage',
          params: { type: 'newApply' },
          query: { id: this.sealApplyId, ic: 'true', orderId: this.orderId },
        })
      }
    })
  }

  private toDetail() {
    this.$router.push({
      name: 'applyFlow',
      params: { type: 'newApply' },
      query: { id: this.sealApplyId, payType: this.$route.query.payType },
    })
  }
}
